<template>
	<view>
		<comHeader :config="navConfig" />
		<view class="layer">
		
	<!-- 持卡人信息 -->
				<view class="ckText">请绑定持卡人本人的银行卡信息</view>
	
		<!-- 银行卡表单 -->
			<!-- <view class="table2">
				<form action="">
					<label class="label1" for="">姓名</label>
					<view class="one">乔坤</view><br>
					<hr>
					<label class="label1" for="">银行卡号</label>
					<view><input class="two" confirmtype="text" placeholder="请输入银行卡卡号"/><view class="xiangji"><navigator url=""><image src="../../../static/myPic/xiangJi.png" mode=""></image></navigator></view></view>
					<hr>
					<label class="label1" for="">银行</label>
					<view class="zero">工商银行</view><br>
					<hr>
					<label class="label1" for="">卡类型</label>
					<view class="zero">储蓄卡</view><br>
					<hr>
					<label class="label1" for="">手机号</label>
					<view><input class="two" confirmtype="text" placeholder="请输入银行预留手机号"/></view><br>
				</form>
			</view> -->
			<view class="table2">
				<view class="order-info-line">
					<text class="order-label">姓名</text>
					<view class="order-input1">乔坤</view>
				</view>
				<view class="order-info-line">
					<text class="order-label">银行卡号</text>
					<input type="text" readonly="readonly" placeholder="输入曾绑定的银行卡卡号" placeholder-style="color:#999999;" class="order-input2"/>
					<view @tap="addpic"><image src="../../../static/xiangji.png" mode=""></image></view>
				</view>
				<view class="order-info-line2" @tap="actionSheetTap">
					<text class="order-label">所属银行</text>
					<view class="order-inputs">工商银行</view>
					<image src="../../../static/jiantou.png" mode=""></image>
				</view>
				<!-- <view class="order-info-line">
					<text class="order-label">卡类型</text>
					<view class="order-inputs">储蓄卡</view>
				</view> -->
				<view class="order-info-line">
					<text class="order-label">手机号</text>
					<input type="text" readonly="readonly" placeholder="请输入银行预留手机号" placeholder-style="color:#999999;" class="order-input"/>
				</view>
			</view>
			
			<view class="choose">
				<view class="radio">
					<radio checked="true" style="transform:scale(0.7)" />
				</view>
				<view class="xieyi">
					<text>同意</text>
					<navigator class="shuoming" url="userAgreement">《用户协议》</navigator>
				</view>
			</view>
			<!-- 确认提交 -->
			<view>
				<!-- <view class="btn" type="button" @click="togglePopup('center', 'tip')"><i>确认提交</i></view> -->
				<navigator url="enterCode" class="btn" type="button"><i>下一步</i></navigator>
				<!-- <uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
				<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
					<view class="uni-tip">
						<view class="uni-tip-title">绑定成功</view>
						<image class="uni-tip-content" src="../../../static/myPic/chenggong.png"></image>
						<navigator url="order" class="uni-tip-group-button">
							<view class="uni-tip-button" @click="cancel('tip')">返回支付</view>
						</navigator>
					</view>
				</uni-popup> -->
				<!-- <uni-popup ref="popup" :type="type" @change="change">{{ content }}</uni-popup>
				<uni-popup :show="show" :type="type" :custom="true" :mask-click="false" @change="change">
					<view class="uni-tip">
						<view class="uni-tip-title">提示</view>
						<view class="uni-tip-content">是否需要再次排队</view>
						<view class="uni-tip-group-button">
							<view class="uni-tip-button" @click="cancel('tip')">取消</view>
							<view class="uni-tip-button" @click="cancel('tip')">确定</view>
						</view>
					</view>
				</uni-popup> -->
			</view>
		</view>
	</view>
</template>

<script>
	import report from '@/components/reportSuccess.vue'
	import uniIcon from '@/components/uni-icon/uni-icon'
	import edit from '@/components/wjx-edit/wjx-edit'
	// import validCode from '@/components/validCode.vue'
	export default {
		components: {
			uniIcon,
			edit,
			report
			// validCode
		},
		data() {
			return {
				validCode:"",
				reportSucca: false,
				dis:"",
				navConfig: {
					comScroll:0,
					isFixed:false, //是否absolute布局
					comScroll:0,
					left: {
						isShowLeft: true,
						leftGobackColor: 'black', //左边返回icon颜色
					},
					mid: {
						isShowMid: true,
						text: '添加银行卡',
						textColor: '#000'
					},
					right: {
						text: '',
						isShowRight: false,
						ico: '', //右侧图标地址
						isShowRightIco: '' //是否显示右侧图标
					}
				},
			}
		},
			methods: {
				togglePopup(type, open) {
					
					this.type = type
					if (open === 'tip') {
						this.show = true
					} else {
						this.$refs[open].open()
					}
				},
				cancel(type) {
					if (type === 'tip') {
						this.show = false
						return
					}
					this.$refs[type].close()
				},
				change(e) {
					console.log(e.show)
				},
				actionSheetTap() {
					uni.showActionSheet({
						// title:'标题',
						itemList: ['中国工商银行', '招商银行', '中国农业银行', '中国建设银行','中国银行','中国民生银行','中国光大银行','中信银行','交通银行','兴业银行','上海浦东发展银行'],
						success: (e) => {
							console.log(e.tapIndex);
							uni.showToast({
								title:"点击了第" + e.tapIndex + "个选项",
								icon:"none"
							})
						}
					})
				},
				//上传封面图片
				addpic() {
					uni.chooseImage({
						count: 1,
						success: (res) => {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: '',
								filePath: tempFilePaths[0],
								name: 'file',
								success: (uploadFileRes) => {
									console.log(uploadFileRes.data);
								}
							})
						}
					})
				},
				reportSucc() {
					this.reportSucca = true
				},
				// OnCreate(){
				// 	 getWindow().setSoftInputMode( WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);
				// }
				// $("#demo-1").on("focus",function(){
				//     document.activeElement.blur();
				// });
			}
		}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	
	i {
		font-style: normal;
	}
	
	.layer{
		position: absolute;
		width: 750upx;
		height: 100%;
		background-color: #F6F6F6;
	}
		
/* 持卡人信息 */
	.chiKa{
		width: 540upx;
		margin-top: 20upx;
		margin-left: 6upx;
		height:27upx;
	}
	.chiKa .SG{
		color: #54B0FF;
		width: 5upx;
		height: 23upx;
		margin-left: 12upx;
		font-size: 23upx;
		float: left;
	}
	.chiKa i{
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #010101;
		margin-left: 52upx;
	}
	.ckText{
		margin-left: 55upx;
		margin-top: 174upx;
		width: 350upx;
		height: 23upx;
		font-size: 24upx;
		font-family: PingFang SC Regular;
		color: #CFCFCF;
		line-height: 36upx;
	}
	
	/* 持卡人表单 */
	.table1{
		width: 690upx;
		height: 189upx;
		box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
		margin-left: 30upx;
		margin-top: 107upx;
	}
	.table1 .label{
		width: 120upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #333333;
		margin-left: 52upx;
		margin-top: 34upx;
		float: left;
	}
	.table1 .one{  
		margin-left: 90upx;
		margin-top: 24upx;
		width: 266upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #999999;
		float: left;
	}
	.table1 hr{
		border: none;
		margin-left: 42upx;
		width: 644upx;
		height: 0.1upx;
		color: #F6F6F6;
		margin-top: 40upx;
	}
	.table1 .two{
		margin-left: 90upx;
		margin-top: 24upx;
		width: 280upx;
		height: 26upx;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: #BBBBBB;
		float: left;
	}
	
	/* 银行卡信息 */
		.yhKa{
			width: 540upx;
			margin-top: 20upx;
			margin-left: 6upx;
			height:27upx;
		}
		.yhKa .SG{
			color: #54B0FF;
			width: 5upx;
			height: 23upx;
			margin-left: 12upx;
			font-size: 23upx;
			float: left;
		}
		.yhKa i{
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #010101;
			margin-left: 52upx;
		}
		
		/* 银行卡表单 */
		.table2{
			width: 690upx;
			height: 360upx;
			box-shadow: 0px 0px 15px 0px rgba(232,232,232,1);
			margin-left: 30upx;
			margin-top: 50upx;
			background: #FFFFFF;
		}
		/* .table2 .label1{
			width: 120upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #333333;
			margin-left: 52upx;
			margin-top: 34upx;
			float: left;
		}
		.table2 .label2{
			width: 200upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #333333;
			margin-left: 52upx;
			margin-top: 34upx;
			float: left;
		}
		.table2 .one{  
			margin-left: 90upx;
			margin-top: 35upx;
			width: 266upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #999999;
			float: left;
		}
		.table2 .zero{
			margin-left: 90upx;
			margin-top: 35upx;
			width: 266upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #000964;
			float: left;
		}
		.table2 hr{
			border: none;
			margin-left: 42upx;
			width: 644upx;
			height: 0.1upx;
			color: #F6F6F6;
			margin-top: 40upx;
		}
		.table2 .two{
			margin-left: 90upx;
			margin-top: 32upx;
			width: 290upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #999999;
			float: left;
		}
		.table2 .xiangji image{
			float: left;
			margin-top: 38upx;
			margin-left: 30upx;
			width: 39upx;
			height: 32upx;
		}
		.table2 .three{
			margin-left: 90upx;
			margin-top: 24upx;
			width: 280upx;
			height: 26upx;
			font-size: 28upx;
			font-family: PingFang SC Regular;
			color: #BBBBBB;
			float: left;
		} */
		.order-info-line{
			width: 640upx;
			margin-top: 44upx;
			display: flex;
			flex-direction: row;
			android:focusable="true";
			android:focusableInTouchMode="true"
		}
		.order-info-line image{
			width: 39upx;
			height: 32upx;
			margin-top: 23                                                                                                                                                                                                                                                  upx;
		}
		.order-info-line2{
			width: 640upx;
			margin-top: 29upx;
			display: flex;
			flex-direction: row;
		}
		.order-info-line2 image{
			width: 30upx;
			height: 30upx;
			margin-top: 20upx;
		}
		.order-label{
			width: 125upx;
			display: block;
			font-size: 28upx;
			height: 28upx;
			padding-top: 22upx;
			margin-left: 30upx;
			
		}
		.order-input{
			height: 28upx;
			width: 400upx;
			font-size: 28upx;
			padding-top: 17upx;
			margin-left: 80upx;
			color:#999999;
		}
		.order-input1{
			height: 28upx;
			width: 400upx;
			font-size: 28upx;
			padding-top: 22upx;
			margin-left: 80upx;
			color:#999999;
		}
		.order-input2{
			height: 28upx;
			width: 400upx;
			font-size: 28upx;
			padding-top: 13upx;
			margin-left: 80upx;
			color:#999999;
		}
		.order-inputs{
			height: 28upx;
			width: 400upx;
			font-size: 28upx;
			padding-top: 22upx;
			margin-left: 80upx;
			color:#000964;
		}
		/* 确认提交 */
		.btn{
			width: 388upx;
			height: 72upx;
			margin-left: 181upx;
			margin-top: 194upx;
			margin-bottom: 34upx;
			border-radius: 35upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
		}
		.btn i{
			width: 120upx;
			height: 26upx;
			padding: 17upx 0 0 155upx;
			font-size: 28upx;
			color: #fff;
			position: absolute;
		}
		
		/* .uni-tip {
			width: 455upx;
			height: 304upx;
			background: #fff;
			box-sizing: border-box;
			border-radius: 10upx;
		}
		
		.uni-tip-title {
			padding: 41upx 0 0 0;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC Regular;
			color: rgba(51,51,51,1);
		}
		
		.uni-tip-content {
			margin-left: 188upx;
			margin-top: 28upx;
			width: 71upx;
			height: 71upx;
		}
		
		.uni-tip-group-button {
			display: flex;
			width: 209upx;
			height: 58upx;
			margin-left: 123upx;
			margin-top: 35upx;
			border-radius: 35upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
			
		}
		
		.uni-tip-button {
			width: 100%;
			font-size: 14upx;
			padding: 13upx 0 0 55upx;
			font-size: 14upx;
			color: #fff;
		} */
		/* 提示窗口 */
		.uni-tip {
			width: 455upx;
			height: 324upx;
			background: #fff;
			box-sizing: border-box;
			border-radius: 15upx;
			
		}
		
		.uni-tip-title {
			text-align: center;
			padding: 41upx 0 0 0;
			font-weight: bold;
			font-size: 32upx;
			color: #333;
			font-family: PingFang SC Regular;
			margin-top: 41upx;
			/* margin-left: 168upx; */
			position: relative;
		}
		
		.uni-tip-content {
			margin-left: 193upx;
			margin-top: 28upx;
			width: 71upx;
			height: 71upx;
		}
		
		.uni-tip-group-button {
			width: 209upx;
			height: 58upx;
			box-shadow: 0upx 0upx 15upx 0upx rgba(232,232,232,1);
			margin-left: 127upx;
			margin-top: 45upx;
			border-radius: 50upx;
			background-image: linear-gradient(to right, #54B0FF,#577AFF);
			filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#577AFF', endColorstr='#54B0FF', GradientType=1); 
			
		}
		
		.uni-tip-button {
			position: absolute;
			font-size: 28upx;
			/* padding: 13upx 0 13upx 55upx; */
			color: #fff;
			margin-left: 49upx;
			margin-top: 9upx;
		}
		
		/*勾选*/
		.choose{
			display: flex;
			flex-direction: row;
			justify-content:flex-start;
			margin-top: 35upx;
		}
		.radio{
			margin-left: 40upx;
			margin-top: -12upx;
		}
		.xieyi{
			display: flex;
			flex-direction: row;
			justify-content:flex-start;
		}
		.xieyi text{
			font-size: 24upx;
		}
		.xieyi .shuoming{
			font-size: 24upx;
			color: #6097FE;
		}
		
</style>
